<template>
    <div class="company-detail-container">
        <el-tabs v-model="activeTab" @tab-click="handleClick">
        <el-tab-pane v-for="(tab, index) in tabs" :key="tab.key" :label="tab.label" :name="tab.key">
            <component v-if="activeTab === tab.key" :tab-key="tab.key" :is="tab.children" :currnetRow="currnetRow"></component>
        </el-tab-pane>
    </el-tabs>
    </div>
</template>

<script>
import CompanyDetailForm from './CompanyDetailForm.vue'
import Investments from './Investments.vue'
import Relationship from './Relationship.vue'

import Persons from '../../persons/index.vue'
import { getCompaniesDetails } from '@/api/companies'

export default {
    components: {
        CompanyDetailForm,
        Investments,
        Persons,
        Relationship
    },
    mounted(){
        const companyId = this.$route.query.id;
        getCompaniesDetails({
            id: companyId
        }).then(res => {
            this.currnetRow = res.data
        })
    },
    data() {
        return {
            tabs: [
                { label: '详情', key: 'Details', children: 'CompanyDetailForm' },
                { label: '投资案例', key: 'Investments', children: 'Investments' },
                { label: '成员', key: 'Persons', children: 'Persons' },
                { label: '历史成员', key: 'historyPersons', children: 'Persons' },
                { label: '关系图', key: 'Relationship', children: 'Relationship' },
            ],
            activeTab: 'Details',
            currnetRow: {}
        };
    },
    methods: {
        handleClick(tab) {
            this.activeTab = tab.name
        }
    }
};
</script>
<style lang="scss" scoped>
.company-detail-container{
    padding: 10px;
}
</style>